<!--师资基础信息-->
<template>
  <div class="wrapper-container">
    <div class='left'>
      <teacher-tree @getNode="getNode"></teacher-tree>
    </div>
    <div class="right">
      <div class="search-container">
        <div class="search-container-item right30">
          <div class="item-name">部门：</div>
          <el-input class="inputWidth" v-model="dataForm.studentName" size="mini"></el-input>
        </div>
        <div class="search-container-item right30">
          <div class="item-name">教员名称：</div>
          <el-input class="inputWidth" v-model="dataForm.studentCode" size="mini"></el-input>
        </div>
        <div class="search-button color-primary width70 right30" @click="initList">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
        <div class="search-button edit-green width120" @click="moreImg">
          <img src="../../../assets/assessment/icon-green-export.png" alt="" />
          <span>批量上传图片</span>
        </div>
      </div>
      <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 1489px" class="table-data" 
        :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" 
         @selection-change="handleSelectionChange">>
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column prop="bh" label="编号" align="center"></el-table-column>
          <el-table-column prop="xm" label="姓名" align="center"></el-table-column>
          <el-table-column prop="xb" label="性别" align="center" ></el-table-column>
          <el-table-column prop="gzbm" label="工作部门" align="center"></el-table-column>
          <el-table-column prop="jszc" label="职称" align="center"></el-table-column>
          <el-table-column prop="rwlb" label="人员类别" align="center" ></el-table-column>
          <el-table-column prop="courseName" label="操作" align="center" width="260" >
              <template slot-scope="scope">
                <div class="flex">
                  <span class="small-btn color-primary" @click="seeInfo(scope.row.id,1)">
                      <img src="../../../assets/assessment/icon-look.png" alt="" />
                      查看
                  </span>
                  <span class="small-btn edit-green" @click="seeInfo(scope.row.id,2)">
                      <img src="../../../assets/assessment/icon-plan-record-detail.png">
                       编辑
                  </span>
                </div>
              </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="export-button" @click="importExcel">
          <img src="../../../assets/assessment/icon-export.png" alt="" />
          <span>导出Excel</span>
      </div>
      <div class="pagination-block">
        <el-pagination prev-text="上一页" next-text="下一页" v-if="total>50" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total"  @current-change="currentPage"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getTeacherList} from "@/api/student";
import TeacherTree from '@/components/teacherTree.vue'
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm:{
        gzbm:'',//工作部门
        xm:'',//教员姓名
        current:1,
        pageSize:50
      },
      total:1,
      IDS:[],//id集合
      tableData: [],
    };
  },
  components:{TeacherTree},
  mounted(){
    this.initList()
  },
  methods: {
    searchStudent(){
      this.initList();
    },
    moreImg(){
      this.$router.push({
        path:'/teacher/foundation/moreImg'
      })
    },
    getNode(e){
      this.dataForm.gzbm = e.deptName;
      this.initList()
    },
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.id);
    },
    //当前页
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initList()
    },
    //查看个人信息
    seeInfo(id,type){
      this.$router.push({
        path:'/teacher/foundation/addOrEdit',
        query:{
          id:id,
          type:type
        }
      })
    },
    async initList(){
      let res = await getTeacherList(this.dataForm)
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.total;
      }
    },
    importExcel(){
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/sysTeacherInfo/exportData',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
        fileDownload(res.data, '师资信息.xlsx');
      });  
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }
  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
 /deep/ .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";

.search-container {
  justify-content: flex-start !important;
  position: relative;
}
.wrapper-container{display: flex;margin: 0;}
.small-btn{width: 40px;}
.right{padding-left: 35px;width:calc(100% - 355px)}
.width70{width: 70px;}

.width120{width: 136px;}
.inputWidth{width: 110px;}
.right30{margin-right: 30px;}

/deep/.el-table .ascending .sort-caret.ascending{
    border-bottom-color: #004CA7;
}
/deep/.el-table .descending .sort-caret.descending{
     border-top-color: #004CA7;
}
/deep/.el-table .sort-caret.ascending{
    border-bottom-color:rgba(0,76,167,0.5)
}
/deep/.el-table .sort-caret.descending{
    border-top-color:rgba(0,76,167,0.5)
}

.left{
  background: #FFFFFF;
  opacity: 1;
  width: 355px;
  overflow-y: auto;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 27px 44px 0 0px;
  border-right: 2px solid #004CA7;
}
.flex{
  display: flex;
  justify-content: center;
}
.small-btn{margin: 0;width:84px;&:nth-child(1){margin-right: 30px;}}
.edit-green{
  color: #02C86C;
  background: #F1FFF8;
  border: 1px solid #02C86C;
}
.color-primary{
  background: #f1f8fe;
  border: 1px solid #51aef6;
  color: #51aef6;
}
</style>
